<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<navigation-link v-slot="{url}">
				我是自己输入的
				<br />
				{{message}}是属于父组件的,显示
				<br />
				{{url}}
			</navigation-link>
			<hr />
			<base-Layout>
				<template v-slot:header>
				    <h1>Here might be a page title</h1>
				</template>
				
				<p>A paragraph for the main content.</p>
				<p>And another one.</p>
				
				<template v-slot:footer>
				    <p>Here's some contact info</p>
				</template>
			</base-Layout>
			<hr/>
			<button @click="showA">显示A</button>
			<button @click="showB">显示B</button>
			<keep-alive>
				<component :is="curCom" ></component>
			</keep-alive>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let comA = {
				template:`
				<div>
					<input type="text">
				</div>
				`
			}
			let comB = {
				template:`
				<div>
					<input type="text">
				</div>
				`
			}
			let navigationLink={
				data(){
					return{
						url:'http://www.baidu.com'
					}
				},
				template:`
				<a v-bind:href="url" class="nav-link">
					<slot v-bind:url="url">默认值</slot>
				</a>
				`
			}
			let baseLayout={
				template:`
				<div class="container">
				  <header>
				    <slot name="header"></slot>
				  </header>
				  <main>
				    <slot></slot>
				  </main>
				  <footer>
				    <slot name="footer"></slot>
				  </footer>
				</div>
				`
			}
			let app = new Vue({
				el:'#app',
				data:{
					message:'hello vue!',
					curCom:'com-a'
				},
				components:{
					navigationLink,
					baseLayout,
					comA,
					comB
				},
				methods:{
					showA:function(){
						this.curCom='com-a'
					},
					showB:function(){
						this.curCom='com-b'
					}
				}
			})
		</script>
	</body>
</html>
